<script setup lang="ts">
import TileItem from '@/components/tiles/item/TileItem.vue'

const props = defineProps({
    // 麻将牌编码
    tiles: { type: Array, required: true },
    transformStyle: {type: String, required: false}
}) 
// 牌顺序反转一下
props.tiles.reverse();

let baseTransformStyle = "rotateX(-30deg) rotateY(-260deg) rotateX(90deg)";
let transformStyleArr = new Array();
for (var i = 0; i < 3; i++) {
  transformStyleArr.push(baseTransformStyle + "translateX(" + (i * 78) + "px)" +" translateY(" + (i * 22) + "px)");
}  
</script>

<template>
  <div class="next-chi-group" :style="{'transform': props.transformStyle}">
    <template v-for="(value, index) in props.tiles" :key="index">
      <TileItem :code="(value as string)" :transformStyle="transformStyleArr[index]" :scale="0.8"></TileItem>
    </template>
  </div>
</template>

<style scoped>
.next-chi-group {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
</style>
